<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('测点明细')" />
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
          <div class="col-sm-6">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li class="select-time">
                                <p style="width: 120px">启用时间：</p>
                                <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="startTime"  th:value ="${startTime}" readonly="readonly"  />
                                <span>-</span>
                                <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="endTime"  th:value ="${startTime}" readonly="readonly" />
                            </li>
                            <li>
                                <p>Pi名称</p>
                                <input type="text"  id="pitagname" name="pitagname" th:value ="${pitagname}"/>
                            </li>
                            
                            
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="initData()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
           
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table"></table>
            </div>
            </div>
              <div class="col-sm-6">
               <div>图形</div>
               <div class="echarts" id="echarts-line-chart" style="width: 100%; height: 550px;"></div>
              </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
     <th:block th:include="include :: echarts-js" />
    <script th:inline="javascript">
    function initData(){
    var startTime =$("#startTime").val();
    var endTime =$("#endTime").val();
    var pitagname =$("#pitagname").val();
     var url=  "getTagDetail?startTime="+startTime+"&endTime="+endTime +"&pitagname="+pitagname;
        $.get(url, function(res) {
            drawChart(res.title, res.xchart, res.ychart);
            drawTable(res.xdata, res.listdata);
       });
        }
    
    function drawChart(title,xdata,ydata){
    	  var lineChart = echarts.init(document.getElementById("echarts-line-chart"),'dark');
    	   var option = {
	       		    title: {
	       		        text: title
	       		    },
	        		
	        		    tooltip: {
	        		        trigger: 'axis'
	        		    },
	        		   legend: {
	        		        data: ['测点值','上限值','下线值']
	        		    },
	        		   
	        		    grid: {
	        		        containLabel: true
	        		    },
	        		    xAxis: {
	        		        type: 'category',
	        		        data:xdata
	        		       
	        		        	},
	        		    yAxis: {
	        		    	 type: 'value',
	        		          
	        		          axisLine: {
	        		            lineStyle: {
	        		              color: '#fff'
	        		            }
	        		          },
	        		          axisLabel: {
	        		            textStyle: {
	        		              color: '#ffff'
	        		            }
	        		          }
	        		    },
	        		    series: [
	        		        {
	        		            name: '测点值',
	        		            type: 'line',
	        		            smooth: true,
	        		            data: ydata
	        		             
	        		        }
	        		        
	        		    ],
	        		    
	          
	        };
    	   lineChart.setOption(option);
    	  
    }
    
    
    
    function drawTable(xList,listdata){
    	var columnsSub1 = [];
    	$(xList).each(function(index, data) {
            columnsSub1.push({
            "title": data.title,
            "field": data.field,
            "align": 'center'
          });
    	});
    	
    	 $('#bootstrap-table').bootstrapTable('destroy').bootstrapTable({
             data: listdata,
          columns: columnsSub1
      });
    	
    }
    
    $(function() { 
    	initData();
    }); 
    
  
    </script>
      
</body>
</html>